<template>
  <div id="main">
    <!-- 水球图  -------------------  效果 -->
    <el-divider id="liquidfill"></el-divider>
    <el-card class="box-card">
      <div slot="header">水球图</div>
      <el-button-group>
        <el-button type="primary" @click="() => (this.liquid = 'rect', this.getLiquid())">rect(圆角矩形)</el-button>
        <el-button type="primary" @click="() => (this.liquid = 'circle', this.getLiquid())">circle(默认圆形)</el-button>
        <el-button type="primary" @click="() => (this.liquid = 'triangle', this.getLiquid())">triangle(三角形)</el-button>
        <el-button type="primary" @click="() => (this.liquid = 'diamond', this.getLiquid())">diamond(菱形)</el-button>
        <el-button type="primary" @click="() => (this.liquid = 'pin', this.getLiquid())">pin(水滴状)</el-button>
        <el-button type="primary" @click="() => (this.liquid = 'arrow', this.getLiquid())">arrow(箭头状)</el-button>
        <el-button type="primary" @click="() => (this.liquid = this.svg, this.getLiquid())">svg(自定义)</el-button>
      </el-button-group>
      <div ref="liquidfill" class="liquidfill" style="background: rgba(1, 5, 53, 0.1)"></div>
    </el-card>
  </div>
</template>

<script>
import 'echarts-liquidfill';
export default {
  data() {
    return {
      liquid: 'circle',
      svg: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z'
    }
  },
  mounted() {
    this.getLiquid()
  },
  methods: {
    getLiquid() {
      var echarts = require('echarts');
      var myChart = echarts.init(this.$refs.liquidfill);
      var option = {
        title: { // 标题组件，包含主标题和副标题
          text: 'ECharts 水球图', // 主标题文本
        },
        series: [
          {
            type: 'liquidFill',
            // data: [0.7], // 数据项的值，介于0-1之间
            data: [0.7, { // 具体设置每一个水波的样式
              value: 0.4, // 值
              direction: 'right', // 波动方向：left / right
              itemStyle: {
                color: 'skyblue', // 波纹的颜色
                opacity: 0.8, // 波纹的透明度
              }
            }],
            // color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'], // 波浪颜色
            radius: '60%', // 图的半径，可设置为百分比如"50%"或者像素值如"100px"
            center: ['50%', '50%'], // 图的位置，第一个值为横坐标，第二个值为纵坐标
            direction: 'right', // 波动方向：left / right
            waveAnimation: true, // 波动动画，默认true
            amplitude: 10, // 波动幅度
            // animationDuration: 0, // 动画时间
            shape: this.liquid,
            phase: 0,
            outline: { // 外边线样式
              show: true, // 是否显示外边线
              borderDistance: 10, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 0.6, // 透明度
                borderWidth: 8, // 边框的宽度
                borderColor: 'blue', // 边框的颜色
                // shadowColor: '#fff', // 阴影的颜色
              }
            },
            backgroundStyle: { // 背景的样式
              color: 'blue', // 水球的背景颜色 -- 可以是 透明 transparent
              opacity: 0.2, // 水球的背景颜色透明度
              borderColor: '#eee', // 边框的颜色
              borderWidth: 20, // 边框的宽度
            },
            itemStyle: { // 波纹的图形样式
              color: 'rgba(32,240,242,1)', // 波纹的背景颜色
              opacity: 0.5, // 波纹的透明度
            },
            label: { // 图形上的文本标签
              show: true, // 是否显示文本标签
              position: ['50%', '60%'], // 文字的位置
              fontSize: 40, // 文字的字体大小
            },
          }
        ]
      };
      myChart.setOption(option);
    }
  }

}
</script>

<style scoped>
.box-card {
  width: 85%;
  margin-bottom: 20px;
}

.liquidfill {
  width: 800px;
  height: 400px;
  border: 1px solid black;
  margin: 10px auto 20px;
}
</style>